ExtJS তে ডায়নামিক লোডিং এর মাধ্যমে আপনি অ্যাপ্লিকেশনের নির্দিষ্ট অংশগুলো (যেমন: ক্লাস বা কম্পোনেন্ট) প্রয়োজনে লোড করতে পারেন। এটি অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করতে সহায়ক, কারণ আপনি শুধুমাত্র যেগুলি প্রয়োজন, সেগুলি লোড করবেন।
ExtJS তে Ext.Loader এবং Ext.require দুটি প্রধান টুল যা ডায়নামিক লোডিং পরিচালনা করতে ব্যবহৃত হয়।
Ext.Loader ExtJS এর একটি বিল্ট-ইন স্ক্রিপ্ট লোডার যা ডায়নামিকভাবে ক্লাস এবং ফাইল লোড করতে সহায়ক। এটি ক্লাস লোড করার জন্য অ্যাপ্লিকেশন স্টার্টআপে ব্যবহৃত হয়, এবং এটি স্বয়ংক্রিয়ভাবে নির্ধারণ করে কোন ক্লাসগুলি লোড করতে হবে।
Ext.Loader.setConfig({
enabled: true, // লোডারকে সক্ষম করা
paths: {
'MyApp': 'app' // 'MyApp' নেমস্পেসের জন্য ফোল্ডার পাথ নির্ধারণ
}
});
Ext.Loader
তার জন্য ক্লাসটিকে ডায়নামিকভাবে লোড করবে।Ext.onReady(function() {
// 'MyApp.model.User' ক্লাস লোড করার জন্য
Ext.Loader.require('MyApp.model.User', function() {
var user = Ext.create('MyApp.model.User', {
id: 1,
name: 'John Doe',
email: 'john.doe@example.com'
});
console.log(user.get('name')); // 'John Doe'
});
});
Ext.Loader.setConfig
: এটি লোডারের কনফিগারেশন সেট করে, যেমন লোডিং সক্ষম করা এবং ক্লাসের পাথ নির্ধারণ।Ext.Loader.require
: এটি ডায়নামিকভাবে ক্লাস লোড করার জন্য ব্যবহৃত হয়।Ext.require একটি সরল পদ্ধতি যা একটি বা একাধিক ক্লাস বা ফাইল লোড করার জন্য ব্যবহৃত হয়। এটি অ্যাপ্লিকেশন রেডি হওয়ার আগে নির্দিষ্ট ক্লাস বা ফাইল লোড করার জন্য ব্যবহার করা হয়। এটি ক্লাস লোড করার সাথে সাথে ডিপেনডেন্সি (অর্থাৎ, অন্যান্য ক্লাসগুলোর প্রয়োজনীয়তা) স্বয়ংক্রিয়ভাবে রেজলভ করে।
Ext.require([
'MyApp.model.User', // মডেল ক্লাস
'MyApp.view.UserGrid' // ভিউ ক্লাস
], function() {
// ক্লাস লোড হওয়ার পর কোড চালানো হবে
var grid = Ext.create('MyApp.view.UserGrid', {
renderTo: Ext.getBody()
});
});
এখানে, Ext.require
একাধিক ক্লাসকে ডায়নামিকভাবে লোড করে এবং যখন সব ক্লাস লোড হয়ে যাবে, তখন একটি callback ফাংশন চালানো হবে।
Ext.Loader
:Ext.require
:ধরা যাক, আমাদের একটি User
মডেল এবং UserGrid
ভিউ রয়েছে। আমরা এগুলি ডায়নামিকভাবে লোড করতে চাই।
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' },
{ name: 'email', type: 'string' }
]
});
Ext.define('MyApp.view.UserGrid', {
extend: 'Ext.grid.Panel',
xtype: 'usergrid',
title: 'User List',
store: {
model: 'MyApp.model.User',
autoLoad: true
},
columns: [
{ text: 'ID', dataIndex: 'id', flex: 1 },
{ text: 'Name', dataIndex: 'name', flex: 2 },
{ text: 'Email', dataIndex: 'email', flex: 3 }
]
});
Ext.application({
name: 'MyApp',
requires: ['MyApp.model.User', 'MyApp.view.UserGrid'],
launch: function() {
// ডায়নামিক লোডিং করার জন্য require ব্যবহার
Ext.require([
'MyApp.model.User',
'MyApp.view.UserGrid'
], function() {
Ext.create('MyApp.view.UserGrid', {
renderTo: Ext.getBody()
});
});
}
});
এখানে Ext.require
ব্যবহার করে আমরা User
মডেল এবং UserGrid
ভিউ লোড করাচ্ছি। launch
ফাংশনটি চলার সময়, যখন এই ক্লাসগুলি পুরোপুরি লোড হয়ে যাবে, তখন আমরা UserGrid
ভিউটি রেন্ডার করবো।